<template>
  <view>
    <view class="header">
      <!-- 菜单 -->
      <Menu></Menu>
    </view>
    <view class="loginContent">
      <!-- 登录 -->
      <van-form @submit="login">
        <view class="iptTitle">电子邮件地址</view>
        <van-field
          v-model="form.email"
          name="邮箱"
          :rules="[
            { required: true, message: '请填写邮箱' },
            { validator: emailValidator, message: '请输入正确邮箱' }
          ]"
        />
        <view class="iptTitle">密码</view>
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              validator: passwordValidator,
              message: '密码必须是8-16位,由数字和字母组成'
            }
          ]"
        />
        <van-button class="loginBtn" block color="#ddd">登入</van-button>
        <view class="signupPrompt"
          >没有账号?
          <navigator
            :url="'/pages/signup/index'"
            style="color: #4caded; margin-left: 10rpx"
            >去注册</navigator
          ></view
        >
      </van-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    // 邮箱校验
    emailValidator(val) {
      return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)
    },
    //密码校验
    passwordValidator(val) {
      return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val)
    },
    login(values) {
      console.log('登录', values)
    }
  }
}
</script>

<style lang="scss" scoped>
.loginContent {
  margin: 0 25rpx;
  .van-cell:not(:last-child)::after {
    border-bottom: transparent;
  }
  ::v-deep .van-field {
    width: 700rpx;
    padding: 0;
    margin: 20rpx 0 50rpx 0;
    position: relative;
    overflow: initial;
    .van-field__error-message {
      position: absolute;
      left: 0;
      bottom: -60%;
    }
    .van-field__control {
      padding: 10rpx;
      border: 4rpx solid #ccc;
      color: #000;
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out,
          background-color 99999s ease-out;
      }
      &:focus {
        transition: 0.3s;
        border: 4rpx solid #4caded;
      }
    }
  }
  .iptTitle {
    color: #37383a;
    font-weight: 700;
    font-size: 28rpx;
  }
  .loginBtn {
    width: 700rpx;
    margin: 20rpx 0;
    border: 2rpx solid #7f8081 !important;

    .van-button__text {
      color: #000;
    }
  }
  .signupPrompt {
    display: flex;
    justify-content: end;
    font-size: 28rpx;
    text-align: right;
  }
}
</style>
